<template>
  <div style="width: 100%; height: 100vh;overflow:hidden">
    <div style="width: 400px; margin: 100px auto">
      <div style="color: #0c1504; font-size: 35px; text-align: center;padding-bottom: 40px">注册操作</div>
      <el-form ref="form" :model="form" size="large" :rules="rules" v-show="!showPhoneRegistration">
        <el-form-item prop="username">
          <el-input placeholder="在这里输入您想要的用户名" v-model="form.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="输入您的密码" v-model="form.password" show-password/>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input placeholder="确认您的密码" v-model="form.confirm" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="plain" @click="register" round>注册</el-button>
        </el-form-item>
      </el-form>
      <div v-show="showPhoneRegistration">
        <!-- 手机注册相关输入框和逻辑 -->
        <el-form-item prop="phone">
          <el-input placeholder="输入您的手机号" v-model="phone" />
        </el-form-item>
        <el-form-item prop="verificationCode">
          <el-input placeholder="输入验证码" v-model="verificationCode" />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" :disabled="isSendingCode" size="large" type="success" @click="generateVerificationCode" round>
            {{ isSendingCode ? '短信以发送两分钟内请勿重复点击' : '生成验证码' }}
          </el-button>
        </el-form-item>

      </div>
      <el-form-item>
        <el-button v-show="!showPhoneRegistration" style="width: 100%;" size="large" round type="info" @click="showPhoneRegistration = !showPhoneRegistration">
          前往手机注册
        </el-button>
      </el-form-item>
      <el-button v-show="showPhoneRegistration" style="width: 100%" size="large" round type="plain" @click="processPhoneRegistration">
        手机注册
      </el-button>
      <!-- 其他手机注册相关内容 -->
      <el-form-item>
        <el-button v-show="showPhoneRegistration" style="width: 100%;margin-top: 20px" size="large" type="info" @click="showPhoneRegistration = !showPhoneRegistration" round>前往密码注册</el-button>
      </el-form-item>

    </div>
  </div>
</template>

<script>
import axios from "axios";
import CryptoJS from 'crypto-js';

export default {
  name: "Register",
  data(){
    return{
      form:{},
      phone:'',
      isSendingCode: false,
      verificationCode:'',
      rules: {
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirm:[
          { required: true, message: '请再次输入密码', trigger: 'blur' },
        ],
      },
      showPhoneRegistration: false, // 控制手机注册的显示与隐藏

    }
  },
  methods:{
    processPhoneRegistration(){
        axios.get("/api/user/processRegisterByPhone",{
          params:{
            phone:this.phone,
            code:this.verificationCode
          }
        }).then(res => {
          if(res.data.code === 10000){
            this.$message({
              type: "success",
              message: res.data.data
            })
            this.$router.push("/interview")
          }else{
            this.$message({
              type: "error",
              message: res.data.data
            })
          }
        })
    },
    startCountdown() {
      setTimeout(() => {
        this.isSendingCode = false;
      }, 120000); // 两分钟的倒计时，单位为毫秒
    },
    generateVerificationCode(){
      this.isSendingCode=true
      axios.get("/api/user/registerByPhone",{
        params: {
          phone: this.phone
        }
      }).then(res => {
        if(res.data.code === 10000){
          this.$message({
            type: "success",
            message: res.data.data
          })
          this.startCountdown()
        }else{
          this.$message({
            type: "error",
            message: res.data.data
          })
        }
      })
    },
    register(){
      if(this.form.password!==this.form.confirm){
        this.$message({
          type: "error",
          message: "确认密码错误！"
        })
        return
      }
      const encryptedPassword=CryptoJS.MD5(this.form.password).toString();
      const params = new URLSearchParams();
      params.append('username', this.form.username);
      params.append('password', encryptedPassword);
      axios.post("/api/user/register",params).then(res => {
        if (res.data.code === 10000) {
          this.$message({
            type: "success",
            message: res.data.data
          })
          this.$router.push("/interview")
        } else {
          this.$message({
            type: "error",
            message: res.data.data
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>